import React,{useState,useEffect} from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    FlatList,
    StatusBar,
    TextInput,
    Text,
    Image,
    TouchableOpacity
} from 'react-native';
import Swiper from 'react-native-swiper';
import { AntDesign,MaterialCommunityIcons } from '@expo/vector-icons';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import '../features/Phone';
import Recommend from './Home/Recommend';
import Type from './Home/Type';

const Tabtop = createMaterialTopTabNavigator();

const renderItem1 = (item,navigation) => {
    return (
        <TouchableOpacity
            activeOpacity={1}
            onPress={()=>{navigation.navigate('Article',{id:item.id})}}
        >
            <View style={{width:w*0.5, marginRight:10}}>
                <Image 
                    source={{uri:item.image}}
                    style={{width:w*0.5, height:w*0.5*399/600, borderRadius:8}}
                />
                <Text
                    numberOfLines={1}
                    ellipsizeMode='tail'
                    style={{fontSize:16, marginTop:10}}
                >
                    {item.topic}
                </Text>
                <View style={{marginTop:10, flexDirection:'row'}}>
                    <AntDesign name="hearto" size={20} color="gray" />
                    <Text style={{color:'gray', fontSize:14, marginLeft:5, marginRight:10}}>{item.collection}</Text>
                    <MaterialCommunityIcons name="message-processing-outline" size={20} color="gray" />
                    <Text style={{color:'gray', fontSize:14, marginLeft:5}}>{item.talk}</Text>
                </View>
            </View>
        </TouchableOpacity>
    )
};

const renderItem2 = (item,navigation) => {
    const rendomColor = () => {
        var r = Math.floor(Math.random()*255);
        var g = Math.floor(Math.random()*255);
        var b = Math.floor(Math.random()*255);
        var color = 'rgba(' + r + ',' + g + ',' + b + ',0.7)';
        return color;
    };

    return (
        <TouchableOpacity
            activeOpacity={1}
        >
            <View style={{
                width:w*0.4, height:w*0.24, marginRight:10, backgroundColor:rendomColor(), borderRadius: 6,
                justifyContent:'center', alignItems:'center', paddingLeft:20, paddingRight:20
            }}>
                <Text
                    numberOfLines={2}
                    ellipsizeMode='tail'
                    style={{fontSize:15, fontWeight:'bold', color:'white', lineHeight:24, textAlign:'center'}}
                >
                    {item.content}
                </Text>
                <Text style={{fontSize:14, color:'white', marginTop:8}}><Text style={{color:'orange', fontWeight:'bold'}}>{item.people}</Text>人正在讨论</Text>
            </View>
        </TouchableOpacity>
    )
};

const Home = ({navigation}) => {
    const [period,setPeriod] = useState({});
    const [data1,setData1] = useState([]);
    const [data2,setData2] = useState([]);

    useEffect(()=>{
        fetch('http://175.27.190.73:9000/home')
            .then(res=>res.json())
            .then(res=>{
                setPeriod(res.result[0]);
                res.result.splice(0,1);
                setData1(res.result);
            });
        fetch('http://175.27.190.73:9000/discuss')
            .then(res=>res.json())
            .then(res=>{
                setData2(res.allDiscuss)
            })
    },[]);

    return (
        <ScrollView
            style={{
                width: w,
                flex: 1,
                backgroundColor: '#f0f0f0'
            }}
        >
            {/* 透明状态栏 */}
            <StatusBar backgroundColor={'transparent'} translucent={true} />

            {/* 轮播图 */}
            <View style={{width:w, height:w*0.46, borderBottomWidth:1, borderBottomColor:'lightgray'}}>
                <Swiper
                    loop={true}
                    autoplay={true}
                    autoplayTimeout={2}
                    horizontal={true}
                    showsButtons={false}
                    showsPagination={false}
                >
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Article',{id:2})}}
                    >
                        <Image 
                            source={require('../assets/home/1.jpg')}
                            style={styles.img1}
                        />
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Article',{id:3})}}
                    >
                        <Image 
                            source={require('../assets/home/2.jpg')}
                            style={styles.img1}
                        />
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Article',{id:1})}}
                    >
                        <Image 
                            source={require('../assets/home/3.jpg')}
                            style={styles.img1}
                        />
                    </TouchableOpacity>
                </Swiper>
            </View>

            {/* 搜索框 */}
            <View style={{
                width: w,
                backgroundColor: 'rgba(255,255,255,0)',
                marginTop: 20,
                alignItems: 'center',
                position: 'absolute'
            }}>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=>{navigation.navigate('Search',{id:1})}}
                >
                    <View style={{
                        width: w*0.8,
                        height: h*0.04,
                        borderWidth: 1,
                        borderStyle: 'solid',
                        borderColor: 'gray',
                        borderRadius: h*0.02,
                        backgroundColor: 'rgba(255,255,255,0.6)',
                        flexDirection: 'row',
                        alignItems: 'center'
                    }}>
                        <AntDesign 
                            name='search1'
                            color='gray'
                            size={20}
                            style={{position:'absolute', paddingLeft: 10}}
                        />
                        <TextInput
                            placeholder={'请输入您要搜索的关键字'}
                            placeholderTextColor='gray'
                            editable={false}
                            style={{
                                width: '100%',
                                height: '100%',
                                paddingLeft: 40
                            }}
                        />
                    </View>
                </TouchableOpacity>
            </View>

            {/* 专题 */}
            <View style={styles.tit}>
                <Text style={styles.tit1}>本期专题</Text>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=>{navigation.navigate('Article',{id:period.id})}}
                >
                    <Image 
                        source={{uri:period.image}}
                        style={{width:w*0.94, height:w*0.9*399/600, borderRadius:8}}
                    />
                    <Text style={{fontSize:16, marginTop:10}}>{period.topic}</Text>
                    <View style={{marginTop:10, flexDirection:'row'}}>
                        <AntDesign name="hearto" size={20} color="gray" />
                        <Text style={{color:'gray', fontSize:14, marginLeft:5, marginRight:10}}>{period.collection}</Text>
                        <MaterialCommunityIcons name="message-processing-outline" size={20} color="gray" />
                        <Text style={{color:'gray', fontSize:14, marginLeft:5}}>{period.talk}</Text>
                    </View>
                </TouchableOpacity>
            </View>

            {/* 寻味之旅 */}
            <View style={[styles.tit,{paddingTop:0}]}>
                <Text style={styles.tit1}>寻味之旅</Text>
                <FlatList 
                    data={data1}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    keyExtractor={(item) => item.id}
                    renderItem={({item})=>{
                        return renderItem1(item,navigation);
                    }}
                />
            </View>

            {/* 秒懂百科 */}
            <View style={[styles.tit,{paddingTop:0}]}>
                <Text style={styles.tit1}>秒懂百科</Text>
            </View>

            {/* 热门讨论 */}
            <View style={[styles.tit,{paddingTop:0}]}>
                <Text style={styles.tit1}>热门讨论</Text>
                <FlatList 
                    data={data2}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    keyExtractor={(item) => item.id}
                    renderItem={({item})=>{
                        return renderItem2(item,navigation);
                    }}
                />
            </View>

            {/* 分类 */}
            <View style={{width:w, height:h*0.84}}>
                <Tabtop.Navigator
                    screenOptions={{
                        tabBarActiveTintColor:'lightblue',
                        tabBarInactiveTintColor:'black',
                        //滑动小横线
                        tabBarIndicatorStyle: {
                            height: 2,
                            backgroundColor: 'lightblue'
                        },
                        tabBarContentContainerStyle: {
                            height: 40,
                            alignItems: 'center',
                        },
                        tabBarLabelStyle: {
                            fontSize: 14
                        },
                        tabBarItemStyle: {
                            width: w/4
                        },
                        tabBarPressColor: 'lightblue',
                        tabBarStyle: {
                            backgroundColor: 'white',
                        },
                        tabBarScrollEnabled: true
                    }}
                >
                    <Tabtop.Screen name="推荐" component={Recommend} />
                    <Tabtop.Screen name="柑橘调" component={Type} />
                    <Tabtop.Screen name="绿叶调" component={Type} />
                    <Tabtop.Screen name="水生调" component={Type} />
                    <Tabtop.Screen name="馥奇香调" component={Type} />
                    <Tabtop.Screen name="皮革调" component={Type} />
                    <Tabtop.Screen name="西普调" component={Type} />
                    <Tabtop.Screen name="木质调" component={Type} />
                    <Tabtop.Screen name="东方调" component={Type} />
                    <Tabtop.Screen name="美食调" component={Type} />
                    <Tabtop.Screen name="花香调" component={Type} />
                    <Tabtop.Screen name="果香调" component={Type} />
                </Tabtop.Navigator>
            </View>
        </ScrollView>
    )
};

const styles = StyleSheet.create({
    img1: {
        width: '100%',
        height: '100%'
    },
    tit: {
        width: w,
        marginBottom: 20,
        padding: w*0.03,
        borderBottomWidth: 1,
        borderBottomColor: 'lightgray'
    },
    tit1: {
        margin: 5,
        marginLeft: 0,
        fontSize: 18,
        fontWeight: 'bold'
    }
});

export default Home

